<template>
  <div class="date">
    <van-cell title="选择多个日期" :value="text" @click="show = true" />
<van-calendar v-model="show" type="multiple"    @confirm="onConfirm" />
  <router-view></router-view>
</div>
</template>

<script>
export default {
 data() {
    return {
      text: '',
      show: false,
    };
  },
  methods: {
     formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      if (date.length) {
        this.text = `选择了 ${date.length} 个日期`;
      } else {
        this.text = this.formatDate(date);
      }
    },
  },
}
</script>

<style>
.date {
  margin: 10px;
}
</style>